<template>
  <el-button @click="saveData('fineReport3801_abs_v_main')">保存数据</el-button>
  <el-button @click="cleanPiniaCacheData('fineReport3801_abs_v_main')">清除缓存</el-button>
  <div id="fineReport3801_abs_v_main" style="width: 100%; height: 100%"></div>
</template>
<script setup lang="ts">
import {onMounted} from "vue";
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";

import config from "./FineReport3801_json_config.json"
import data from "./FineReport3801_json_data.json"
const usePreStore = usePreviewStore();
const dataset = [ //  添加数据集按钮
  { //Json数据
    id: 1,
    value: "新建Json数据集"
  },
  { //http请求数据
    id: 2,
    value: "新建Http接口数据集"
  },
  { //API服务数据
    id: 3,
    value: "API服务数据集"
  },
  {
    id: 4,
    value: "外部数据集"
  }
];
const options = {
  row: 100,
  col: 25,
  width: () => document.documentElement.clientWidth,
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  dataset
}
options.onUpdateDatasetList =  () => {
  return new Promise((resolve, reject) => {
    resolve([]);
  })
}

// 该方法的返回值是一个Promise
const onUpdateData = (datasets, params) => {
  console.log("..fineReport3801_abs_v_main.vue....datasets:", datasets);
  console.log("..fineReport3801_abs_v_main.vue....params:", params);
  return new Promise((resolve, reject) => {
    resolve(queryonUpdateDataFrom(datasets,params, data));
  })
}
options.onUpdateData = onUpdateData

const loadData = () => {

    sheetDesign.loadData({config: config, data: data});

}

const on_dataset_edited = (dataset)=>{
  console.log("...dataset_edited...,dataset:",dataset);
}
// 绑定授权码
//XZReport.setKey(授权码)  //可以在localhost/127.0.0.1环境下使用
let sheetDesign;
onMounted(() => {
  sheetDesign = XZReportDesigner("#fineReport3801_abs_v_main", options);
  sheetDesign.loadData({config: config, data: data});
  // 监听 编辑数据集事件
  sheetDesign.on("dataset-edited",on_dataset_edited);
})

function saveData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  const {config, data} = sheetDesign.getData(); //报表设计器的保存事件
  usePreStore.saveReportDesignerPreviewData(reportDesignerPreviewId, config, data);
  console.log(".fineReport3801_abs_v_main.vue..sheetDesign.getData():", sheetDesign.getData());
  console.log(config)
  console.log(data);
}

function cleanPiniaCacheData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  usePreStore.cleanReportDesignerPreviewData(reportDesignerPreviewId);

}

</script>
<script lang="ts">
export default {
  name: "fineReport3801_v_main"
}
</script>
<style scoped>

</style>
